<template>
  <div class="container">
    <div class="app-container">
      <!-- 头部 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row type="flex" justify="space-between">
            <el-col>
              <span>标签名称:</span>
              <el-input
                v-model="input"
                style="width: 25%; margin-left: 10px"
              />
              <span style="margin-left: 20px">状态:</span>
              <el-select
                v-model="choice"
                placeholder="请选择"
                style="width: 25%; margin-left: 10px"
              >
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
              <el-button
                v-model="radio"
                style="margin-left: 10px"
                @click="empty"
              >清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-col>
            <el-col>
              <el-row type="flex" justify="end">
                <el-button
                  v-if="$route.query.id"
                  type="text"
                  class="el-icon-back"
                  @click="$router.push('/subjects/list')"
                >返回学科</el-button>

                <el-button
                  type="success"
                  @click="showDialog = true"
                >新增标签</el-button>
              </el-row>
            </el-col>
          </el-row>
          <!-- :closable="false"  关闭 关闭按钮 -->
          <el-alert
            style="margin-top: 15px"
            :title="`数据共 ${counts} 条`"
            type="info"
            show-icon
            :closable="false"
          />
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div> -->
        <!-- 数据 -->

        <el-table :data="tableData" border style="width:100%">
          <el-table-column type="index" label="序号" />          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="tagName" label="标签名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zip" label="状态" width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button
                :disabled="false"
                type="text"
                size="mini"
                @click="hSwitchStatus(row)"
              >
                <span @click="state(row)">{{
                  row.state === 0 ? "启用" : "禁用"
                }}</span>
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 1 ? true : false"
                @click="clickEdit(row)"
              >修改</el-button>
              <el-button
                v-if="row.status != 'deleted'"
                type="text"
                size="small"
                :disabled="row.state === 1 ? true : false"
                @click="hDelete(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <el-row type="flex" justify="end">
            <el-pagination
              :page-sizes="[5, 10, 20, 50]"
              layout="total, prev, pager, next, jumper , sizes"
              :current-page="list.page"
              :total="counts"
              :page-size="10"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 修改弹框 -->
    <TagsAdd
      :id="id"
      ref="addForm"
      :show-dialog.sync="showDialog"
      :table-data="tableData"
      @addSubject="getList"
      @changeid="id=$event"
    />
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import TagsAdd from '../components/tags-add.vue'
export default {
  components: {
    TagsAdd
  },
  data() {
    return {
      // 标签名称
      id: this.$route.query.id,
      input: null,
      choice: null,
      radio: '',
      currentPage: 1,
      counts: 1,
      list: {
        page: 1, // 当前页面的数量
        pagesize: 10 // 每页的数量
      },

      //  获取列表数据
      tableData: [],
      obj: null,
      showDialog: false // 显示弹层隐藏
    }
  },
  computed: {
    status() {
      return this.status
    }
  },
  created() {
    this.getList()
    console.log(this.$router)
  },
  methods: {
    // 清除数据
    empty() {
      this.input = null
      this.choice = null
      this.radio = ''
      this.getList()
    },

    // 获取文章列表
    async getList() {
      const result = await list({
        ...this.list,
        tagName: this.input,
        state: this.choice,
        subjectID: this.id
      })
      this.tableData = result.data.items
      this.counts = result.data.counts
      // this.page.total = result.data.counts;
      this.articleId = result.data.items.id
    },
    // 是否禁用编辑
    async hSwitchStatus(val) {
      // console.log(val);
      try {
        await changeState({
          id: val.id,
          state: val.state
        })
        this.getList()
        // console.log(11);
        this.$message.success('操作成功')
      } catch (err) {
        this.$message.error('操作失败')
      }
    },
    // 删除数据
    hDelete(userId) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.doDelete(userId)
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    // 删除
    async doDelete(id) {
      try {
        await remove({ id })
        this.$message.success('成功删除了用户')
        const totalPage = Math.ceil((this.counts - 1) / this.list.pagesize) // 总页数
        const currentPage = this.list.page > totalPage ? totalPage : this.list.page
        this.list.page = currentPage < 1 ? 1 : currentPage
        this.getList()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    clickEdit(row) {
      // 获取子组件的弹窗实例，点击修改时调用子组件的详情方法
      this.$refs.addForm.getDetail(row)
      // 展示弹窗
      this.showDialog = true
    },
    // 分页  监听pagesize 改变的事件
    handleSizeChange(val) {
      this.list.pagesize = val
      this.getList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.list.page = val
      this.getList()
    },
    // 启用禁用选择
    async state(row) {
      // console.log(row);
      if (row.state === 0) {
        row.state = 1
        await changeState(row.state)
      } else {
        row.state = 0
        await changeState(row.state)
      }
      this.getList()
    },
    // 搜索查找
    async search() {
      this.getList()
      // console.log(this.$route.query)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
